<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>具名插槽的缩写</h1>
    <p>v-slot:可以简写成#，那么v-slot:header可以简写成#header，v-slot:default可以简写成#default。</p>
    <p>如果只有一个插槽，那么#default可以简写成#</p>
    <p>如果有多个插槽，那么#default不能进行简写</p>
    <!-- 申明模板 -->
    <template id="tem1">
        <div>
            <!-- 头部 -->
            <header>
                <slot name="header" :user="fengxian"></slot>
            </header>
            <!-- 身体 -->
            <section>
                <slot :user1="fengxian" :user2="yuanhaozhe"></slot>
            </section>
            <!-- 尾部 -->
            <footer>
                <slot name="footer" :user="yuanhaozhe"></slot>
            </footer>
        </div>
    </template>
    <main id="app">
        <my-box>
            <template v-slot:header="data">
                <h1>{{data.user.firstName}}</h1>
            </template>
            <template #default="data">
                <div>
                    <p>{{data.user1.lastName}}</p>
                    <p>{{data.user2.lastName}}</p>
                </div>
            </template>
            <template #footer="data">
                <h1>{{data.user.lastName}}</h1>
            </template>
        </my-box>
    </main>
</body>
<script src="../vue.min.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                title: "百度一下"
            }
        },
        components: {
            "my-box": {
                template: "#tem1",
                data() {
                    return {
                        fengxian: {
                            firstName: "Hydra",
                            lastName: "Feng"
                        },
                        yuanhaozhe: {
                            firstName: "Haozhe",
                            lastName: "Yuan"
                        }
                    }
                }
            },

        }
    })
</script>

</html>